<template>
  <div class="account" style="height: 100%">
    <div class="pageTitleSubTitle">
      <div class="title">账号管理</div>
      <div class="btn">
        <a-button v-if="configJurisdiction.add" type="primary" @click="openModal"><a-icon type="plus" />添加账号</a-button>
      </div>
    </div>
    <Search :search="search" @searchVal="searchVal"/>
    <div class="storeContent">
      <a-table :columns="columns" :data-source="columnsData" :pagination="false" :rowKey="(record,index) => index">
        <span slot="store" slot-scope="store">{{store && store.name?store.name:''}}</span>
        <span slot="job_title" slot-scope="job_title">{{job_title && job_title.name?job_title.name:''}}</span>
        <span slot="gender" slot-scope="gender">{{gender == 1?'男':'女'}}</span>
        <span slot="job_type" slot-scope="job_type">
          <div v-for="(item,index) in typeList" v-if="item.type == job_type">{{item.name}}</div>
        </span>
        <span slot="roles" slot-scope="roles">
          <div v-for="(item,index) in roles" :key="index">{{item.name}}</div>
        </span>
        <span slot="status" slot-scope="status,record">
          <a-switch :checked="status == 1?true:false" @change="e=>{switchChange(e,record)}"/>
        </span>
        <span slot="store_manager_staff" slot-scope="store_manager_staff">{{store_manager_staff && store_manager_staff.name?store_manager_staff.name:''}}</span>
        <span slot="area_no" slot-scope="area_no,record" class="operation">
<!--          <span>查看</span>-->
          <span v-if="configJurisdiction.update" @click="editColumns(record)">编辑</span>
          <span v-if="configJurisdiction.del" @click="removeStore(record)">删除</span>
        </span>
      </a-table>
      <Pagination :current="page" :total="total" @pageSize="pageSize" />
    </div>
    <a-modal
      v-model="visible"
      :title="title"
      width="650px"
      cancelText="关闭"
      okText="保存">
      <AppendPayment v-if="visible" @sendData="getAppendData" ref="child" :appendData="configAppend" :idKey="idKey"  />
      <template slot="footer">
        <a-button class="modalCloseBtn" @click="modalChange(1)">关闭</a-button>
        <a-button class="modalConfigBtn" type="primary" :loading="loading" @click="modalChange(2)">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
  import { column, appendData } from './index'
  import Pagination from '@/common/pagination/index'
  import Search from '@/common/search/index'
  import AppendPayment from './appendAccount'
  export default {
    name:'account',
    components:{
      Pagination,
      Search,
      AppendPayment
    },
    data(){
      return {
        visible:false,
        loading:false,
        title:'添加账号',
        page:1,
        total:0,
        job_no:0,
        columns: column,
        columnsData:[],
        typeList:[
          {type:1,name:'补发师'},
          {type:2,name:'头皮师'},
          {type:3,name:'助理'},
          {type:4,name:'微信客服'},
          {type:5,name:'售后客服'},
          {type:6,name:'其他'}
        ],
        configAppend:[],
        searchText:{},
        search:[
          {
            type:'input',
            name:'姓名',
            place:'请输入姓名',
            val:'',
            key:'name',
          },
          {
            type:'input',
            name:'手机号',
            place:'请输入手机号',
            val:'',
            key:'phone'
          },
          {
            type:'select',
            name:'所属门店',
            place:'请输入所属门店',
            val:'',
            key:'store_no',
            nameKey:'name',
            idKey:'store_no',
            selectData:[]
          },
          {
            type:'select',
            name:'岗位',
            place:'请选择岗位',
            val:'',
            key:'job_title_id',
            nameKey:'name',
            idKey:'id',
            selectData:[]
          }
        ],
        idKey:{},
        jurisdiction:[
          { key:'admin-staff-drop-off', back:'look'},
          { key:'admin-staff-add', back:'add'},
          { key:'admin-staff-update', back:'update'},
          { key:'admin-staff-del', back:'del'},
        ],
        configJurisdiction:{}
      }
    },
    created() {
      this.getList();
      this.getStation();
      this.getPermission();
      this.getRoles();
      this.configJurisdiction = this.getJurisdiction(2,this.jurisdiction);
    },
    methods:{
      getRoles(){
        this.Api.rolesAll().then(res=>{
          if(res.code !== 200) return;
          appendData.forEach(item=>{
            if(item.key === 'role_ids') item.selectData = res.data;
          })
        })
      },
      getStation(){
        this.Api.stationAll().then(res=>{
          if(res.code !== 200) return;
          this.search.forEach(item=>{
            if(item.key === 'job_title_id') item.selectData = res.data
          });
          appendData.forEach(item=>{
            if(item.key === 'job_title_id') item.selectData = res.data;
          })
        })
      },
      getPermission(){
        this.Api.permission().then(res=>{
          if(res.code !== 200) return;
          this.search.forEach(item=>{
            if(item.key === 'store_no') item.selectData = res.data;
          });
          appendData.forEach(item=>{
            if(item.key === 'store_no') item.selectData = res.data;
          })
        })
      },
      openModal(){
        this.title = '添加账号';
        this.visible = true;
        this.configAppend = appendData
      },
      editColumns(item){
        this.job_no = item.job_no;
        this.Api.userDetail({},item.job_no).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.title = '编辑账号';
          appendData.forEach(item=>{
            item.val = res.data.user[item.key];
            if(item.key === 'role_ids'){
              let val = [];
              res.data.role.forEach(demo=>{
                val.push(demo.role_id)
              });
              item.val = val
            }
          });
          let store_no = res.data.store_no;
          this.idKey.store_no = store_no;
          let ipad = [];
          res.data.permissions.forEach(item=>{ipad.push(item.id)});
          res.data.web.forEach(item=>{ipad.push(item.id)});
          this.idKey.web = res.data.web;
          this.idKey.ipad = ipad;
          this.configAppend = appendData;
          this.visible = true;
        })
      },
      removeStore(e){
        this.$confirm({
          title: '确定删除当前账号?',
          cancelText: '取消',
          okText:'删除',
          onOk:()=> {
            this.Api.removeUserList({},e.job_no).then(res=>{
              if(res.code !== 200) return this.$message.info(res.msg);
              this.$message.success(res.msg);
              this.getList()
            })
          }
        })

      },
      pageSize(e){
        this.page = e;
        this.getList();
      },
      getAppendData(e){
        e.password = '';
        e.status = 0;
        // return e;
        if(this.title === '添加账号') return this.Api.appendUser(e).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.page = 1;
          this.$message.success(res.msg);
          this.visible = false;
          this.getList()
        });
        return this.Api.editUser(e,this.job_no).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.$message.success(res.msg);
          this.visible = false;
          this.getList()
        })
      },
      modalChange(e){
        if(e === 1) return this.visible = false;
        this.$refs.child.sendData();
      },
      switchChange(e,record){
        this.Api.staffStatus({status:e?1:2},record.job_no).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.getList();
          this.$message.success(res.msg)
        })
      },
      searchVal(e){
        this.searchText = e;
        this.page = 1;
        this.getList()
      },
      getList(){
        let data = this.searchText;
        data.page = this.page;
        data.size = 10;
        this.Api.userList(data).then(res=>{
          if(res.code !== 200) return;
          this.total = res.data.total;
          this.columnsData = res.data.items;
        })
      }
    }
  }
</script>
